<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        @import url(../style.css);
    .background {
        stroke: white;
        stroke-width: 1px;
        fill: white;
    }

    .node {
        stroke: black;
        stroke-width: 1.5px;
        cursor: move;
        fill: beige;
    }

    .link {
        fill: none;
        stroke-width: 3px;
        opacity: 0.7;
        marker-end: url(#end-arrow);
    }

    .label {
        fill: black;
        font-family: Verdana;
        font-size: 25px;
        text-anchor: middle;
        cursor: move;
    }
    </style >
    </head >
<body >
    <a href="../index.html">cola.js home</a>
    <script src="../extern/graphlib-dot.min.js"> </script>
    <script src="../extern/d3.v3.js"></script>
    <script src="../cola.min.js"></script>
    <script>
        function graph(edgeType) {
            var d3cola = cola.d3adaptor(d3).convergenceThreshold(0.1);

            var width = 1600, height = 800;
            var heading = d3.select("body").append("h1");
            heading.text(edgeType);
            var outer = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("pointer-events", "all");

            outer.append('rect')
                .attr('class', 'background')
                .attr('width', "100%")
                .attr('height', "100%")
                .call(d3.behavior.zoom().on("zoom", redraw));

            var vis = outer
                .append('g')
                .attr('transform', 'translate(0,50) scale(0.5)');

            function redraw() {
                vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
            }

            outer.append('svg:defs').append('svg:marker')
                .attr('id', 'end-arrow')
                .attr('viewBox', '0 -5 10 10')
                .attr('refX', 8)
                .attr('markerWidth', 6)
                .attr('markerHeight', 6)
                .attr('orient', 'auto')
              .append('svg:path')
                .attr('d', 'M0,-5L10,0L0,5L2,0')
                .attr('stroke-width', '0px')
                .attr('fill', '#000');

            d3.json("graphdata/adam.json", function (error, graph) {
                var nodeNames = {};
                var gedges = graph.edges
                //.filter(function(e) {
                //    return e.type == edgeType;
                //});
                gedges.forEach(function (e) {
                    nodeNames[e.source] = "";
                    nodeNames[e.target] = "";
                })
                var nodes = [], edges = [];
                var i = 0;
                for (var n in nodeNames) {
                    nodeNames[n] = i++;
                    nodes.push({ id: i, name: n });
                }
                var edges = gedges.map(function (e) {
                    return {
                        source: nodeNames[e.source],
                        target: nodeNames[e.target],
                        type: e.type
                    };
                })
                d3cola
                    .avoidOverlaps(true)
                    .size([width, height])
                    .nodes(nodes)
                    .links(edges)
                    .jaccardLinkLengths(250);

                var link = vis.selectAll(".link")
                    .data(edges)
                    .enter().append("path")
                    .attr("class", "link")
                    .style("stroke", function (d) {
                        return d.type == 'dislikes' ? 'red' : 'black'
                    })

                var margin = 10, pad = 12;
                var node = vis.selectAll(".node")
                    .data(nodes)
                    .enter().append("rect")
                    .attr("class", "node")
                    .attr("rx", 5).attr("ry", 5)
                    .call(d3cola.drag);

                var label = vis.selectAll(".label")
                    .data(nodes)
                    .enter().append("text")
                    .attr("class", "label")
                    .text(function (d) { return d.name; })
                    .call(d3cola.drag)
                    .each(function (d) {
                        var b = this.getBBox();
                        var extra = 2 * margin + 2 * pad;
                        d.width = b.width + extra;
                        d.height = b.height + extra;
                    });

                var lineFunction = d3.svg.line()
                    .x(function (d) { return d.x; })
                    .y(function (d) { return d.y; })
                    .interpolate("linear");

                d3cola.start(10, 30, 100).on("tick", function () {
                    node.each(function (d) { d.innerBounds = d.bounds.inflate(-margin); })
                        .attr("x", function (d) { return d.innerBounds.x; })
                        .attr("y", function (d) { return d.innerBounds.y; })
                        .attr("width", function (d) { return d.innerBounds.width(); })
                        .attr("height", function (d) { return d.innerBounds.height(); });

                    link.attr("d", function (d) {
                        var route = cola.makeEdgeBetween(d.source.innerBounds, d.target.innerBounds, 5);
                        return lineFunction([route.sourceIntersection, route.arrowStart]);
                    });
                    if (isIE()) link.each(function (d) { this.parentNode.insertBefore(this, this) });

                    label
                        .attr("x", function (d) { return d.x })
                        .attr("y", function (d) { return d.y + (margin + pad) / 2 });

                });
            });
        }
        function isIE() { return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null))); }
        graph('likes');
        //graph('dislikes');
    </script>
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-63535113-1', 'auto');
  ga('send', 'pageview');

    </script>
</body>
</html>
